import React, { useState } from 'react';
import { Select } from 'antd';
const { Option } = Select;


export function CustomUniversitySearch({ options, title, placeholder }) {
  const universities = options;

  const [selectedUniversities, setSelectedUniversities] = useState([]);

  const handleChange = (value) => {
    setSelectedUniversities(value);
  };

  return (
    <div className="flex items-center whitespace-nowrap">
      <span className="flex-shrink-0 font-bold">{title}</span>

      <Select
        mode="multiple"
        style={{ width: '100%' }}
        placeholder={placeholder}
        defaultValue={[]}
        allowClear
        onChange={handleChange}
        optionFilterProp="children"
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
      >
        {universities.map(uni => (
          <Option key={uni} value={uni}>
            {uni}
          </Option>
        ))}
      </Select>
    </div>
  );
}
